<template>
  <div class="layout">
    <div class="ornament">
      <div class="webheart">
        <div class="crumbs-wrap">
          <h2>{{ title }}</h2>
          <!-- <div class="crumbs">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item v-for="(v, i) in navList" :key="i">
                <span v-if="i == navList.length - 1">{{ v.meta.title }}</span>
                <router-link v-else :to="v.path">
                  {{ v.meta.title }}
                </router-link>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div> -->
        </div>
      </div>
    </div>
    <div class="user-center-home">
      <div class="webheart">
        <el-container>
          <el-aside width="260px">
            <SideNav />
          </el-aside>
          <el-container>
            <el-main>
              <router-view />
            </el-main>
          </el-container>
        </el-container>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {
    SideNav: () => import('./components/SideNav.vue'),
  },
  data() {
    return {
      title: '用户空间',
      navList: [],
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.title = this.$route.meta.title
        this.navList = this.$route.matched.filter((v) => v.meta && v.meta.title)
        this.navList.unshift({ path: '/index', meta: { title: '首页' } })
      },
    },
  },
  mounted() {},
  methods: {},
}
</script>
<style scoped lang="scss">
.ornament {
  height: 125px;
  background: url('../../assets/users/bg01.png') no-repeat center;
  background-size: cover;
  .crumbs-wrap {
    clear: both;
    float: left;
    margin-left: 0;
    margin-top: 25px;
  }
  h2 {
    color: #fff;
    font-size: 34px;
  }
  .crumbs {
    //   margin-top: 10px;
  }
}
.user-center-home {
  margin-top: 40px;
  margin-bottom: 50px;
  min-height: 500px;
}
</style>
<style scoped>
.user-center-home >>> .el-main {
  padding: 0 0 0 20px;
}
</style>